<template>
    <el-container>
        <el-header>
            <h2>数据展示</h2>
        </el-header>
        <el-main>
            <el-row>
                <div style="width: 700; height: 600; color:red; float: left;">
                    <el-card style="width: 700px; height: 350px; ">

                        <div style="text-align: left; width: 350px;  float: right">
                            <!-- <h3>时间阈值:{{ limit1 }}</h3> -->
                            <!-- <h3>温度阈值:{{ limit2 }}℃</h3> -->
                            <!-- <h3>光照强度阈值:{{ limit3 }}</h3>
                            <h3>可利用温差:{{ limit4 }}</h3>
                            <h3>电机状态:{{ buttonvalue1 }}</h3>  -->
                        </div>

                        <div style="text-align: left; width: 350px;  ">
                            <h3>烟雾浓度1:{{ state1 }}℃</h3>
                            <h3>烟雾浓度2:{{ state2 }}℃</h3>
                            <!-- <h3>水质1:{{ TDS1 }}</h3> -->
                            <!-- <h3>水质2:{{ TDS2 }}</h3> -->
                            <h3>非法进入状态:{{ state3 }}</h3>
                            <!-- <h3>人员活动状态:{{ state9 }}</h3> -->
                            <!-- <h3>风扇1功率:{{ power1 }}</h3>
                            <h3>风扇2功率:{{ power2 }}</h3>
                            <h3>LED灯发光强度:{{ power3 }}</h3> -->
                        </div>



                    </el-card>
                    <!-- <el-card style="width: 700px; height: 250px;">
                        <div style="text-align: left; width: 350px; float: right; ">
                            <h3>功率1:{{ power1 }}</h3>
                            <h3>功率2:{{ power2 }}</h3>
                            <h3>功率3:{{ power3 }}</h3>

                        </div>
                        <div style="text-align: left; width: 350px;  ">
                            <h3>温度阈值:{{ limit1 }}℃</h3>
                            <h3>低水位阈值:{{ limit2 }}</h3>
                            <h3>高水位阈值:{{ limit3 }}</h3>
                            <h3>饮水机属性:{{ buttonvalue1 }}</h3>
                        </div>
                    </el-card> -->
                </div>



                <div style="width: 700; height: 600; color:red; float: left; ">
                    <el-card style="width: 700px; height: 150px;">
                        <h3>当前时间:{{ currentTime }}</h3>
                    </el-card>
                    <el-card style="width: 700px; height: 200px;">
                        <div style="text-align: left; width: 350px;  ">
                            <!-- <h3>v1:{{ state5 }}</h3>
                            <h3>v2:{{ state6 }}</h3> -->
                            <!-- <h3>电压强度:{{ state7 }}</h3> -->
                            <!-- <h3>警报:{{ warn }}</h3> -->
                        </div>
                    </el-card>
                </div>



            </el-row>
            <el-row>
                <div style="width: 300; height: 600; color:red; float: left; ">
                    <el-card style="width: 700px; height: 600px; ">
                        <div style="text-align: left; width: 350px;  float: right;">
                            <!-- <h3>电机状态</h3>
                            <el-button type="primary" @click="setbuttonvalue1">正转</el-button>
                            <br>
                            <el-button type="primary" @click="setbuttonvalue2">反转</el-button>
                            <br>
                            <el-button type="primary" @click="setbuttonvalue3">关闭</el-button>
                            <br> -->
                            <!-- <h3>空调开关</h3>
                            <el-switch @change="setswitch3" v-model="switch3" active-color="#13ce66"
                                inactive-color="#ff4949"></el-switch>
                            <h3>风扇1</h3>
                            <el-switch @change="setswitch1" v-model="switch1" active-color="#13ce66"
                                inactive-color="#ff4949"></el-switch>
                            <h3>风扇2</h3>
                            <el-switch @change="setswitch2" v-model="switch2" active-color="#13ce66"
                                inactive-color="#ff4949"></el-switch> -->



                        </div>
                        <div style="text-align: left; width: 300px; height: 600px; ">
                            <h3>闭馆</h3>
                            <el-switch @change="setswitch4" v-model="switch4" active-color="#13ce66"
                                inactive-color="#ff4949"></el-switch>
                            <h3>设置烟雾阈值</h3>
                            <el-input v-model="inputlimit1" placeholder="烟雾阈值" style="width: 90px;  "></el-input>
                            <el-button type="primary" @click="setlimit1">确定</el-button>
                            <!-- <h3>设置温度阈值</h3>
                            <el-input v-model="inputlimit2" placeholder="温度阈值" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setlimit2">确定</el-button> -->
                            <!-- <h3>设置光照强度阈值</h3>
                            <el-input v-model="inputlimit3" placeholder="光照强度阈值" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setlimit3">确定</el-button>  -->
                            <!-- <h3>设置风扇1功率</h3>
                            <el-input v-model="inputpower1" placeholder="风扇1功率" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setpower1">确定</el-button>
                            <h3>设置风扇2功率</h3>
                            <el-input v-model="inputpower2" placeholder="风扇2功率" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setpower2">确定</el-button> -->

                        </div>
                    </el-card>
                </div>
                <div style="width: 300; height: 600;  float: left; ">
                    <el-card style="width: 700px; height: 600px;">
                        <div style="text-align: left; width: 300px; height: 600px; ">
                            <!-- <h3>设置LED灯功率</h3>
                            <el-input v-model="inputpower3" placeholder="LED灯功率" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setpower3">确定</el-button> -->
                            <!-- <h3>设置可利用温差</h3>
                            <el-input v-model="inputlimit4" placeholder="温度阈值1" style="width: 90px;  "></el-input>
                            <el-button type="primary" @click="setlimit4">确定</el-button> -->
                        </div>
                    </el-card>
                </div>

            </el-row>
        </el-main>
    </el-container>


</template>


<script>
const axios = require('axios');
import { websocket } from '@/utils/websocket';
//相当于导入和逻辑处理一起解决
var sendMeg = "";//处理发送给硬件的信息
var Meg = "";
var cardid = ""; // eslint-disable-line no-unused-vars

export default {
    // el: '#control',
    data() {
        return {
            // inputpower1:"",
            // inputpower2:"",
            // inputpower3:"",
            // power1:0,
            // power2:0,
            // power3:0,
            inputlimit1: "", //设置温度阈值1
            // inputlimit2: "", //设置温度阈值2
            // inputlimit3: "", //设置光照阈值
            // inputlimit4: "", //设置可利用温差
            // switch1: false,
            // switch2: false,
            // switch3: false, //空调开关
            switch4: false, //闭馆
            // card: ["C78874E56"],
            state1: "", //烟雾浓度1
            state2: "", //烟雾浓度2
            state3: "正常", //非法进入状态
            // state4: "",
            // state5: "", //v1
            // state6: "", //v2
            // state7:"",
            state8: "",
            // state9: "", //人员活动状态
            currentTime: "",
            limit1: 20, //烟雾阈值
            // limit2: 20, //温度阈值
            // limit3: 50, //光照强度阈值
            // limit4: 20, //可利用温差
            // warn: "",
            // buttonvalue1: "", //饮水机属性  
            // cardid: "", //传来的卡号
            change: 0,
            // changecurrentTime: "",
            hh: 0,
            ss: 0,
            mm: 0,
        }
    },
    computed: {
    },
    watch: {//监听错误次数变化


    },
    created() {
        this.updateTime();
        this.initWecSocket();
    },
    methods: {
        updateTime: function () {  //获取当前时间
            this.currentTime = new Date().toLocaleTimeString();
            setTimeout(this.updateTime); // 每秒更新一次时间
        },
        setlimit1: function(){
            this.limit1 = this.inputlimit1;
        },
        setswitch4: function () {
            if (this.switch4 == true) {
                axios.get("http://localhost:8888/sendMessageTo/HWwarn2Z");
            }
            else{
                axios.get("http://localhost:8888/sendMessageTo/HWwarn0Z");
            }
        },
        reconnect: function () {
            sendMeg = "HWLmax" + this.limit1 + "Z";
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
            sendMeg = "HWTmax" + this.limit2 + "Z";
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
            this.currentTime = new Date().toLocaleTimeString();
            sendMeg = "HWtime" + this.currentTime + "Z";
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
            // if (this.switch4 == false) {
            //     axios.get("http://localhost:8888/sendMessageTo/HWled10Z");
            // } else if (this.switch4 == true) {
            //     axios.get("http://localhost:8888/sendMessageTo/HWled11Z");
            // }
        },
        initWecSocket: function () {
            // this.webSocket = new WebSocket("ws://localhost:8888//ws/WebSocket");
            this.webSocket = websocket;
            this.webSocket.onmessage = this.webSocketOnmessage;
            // this.webSocket.onerror = this.webSocketOnerror();
            //初始化完毕之后echarts显示数据信息
        },
        webSocketOnmessage: function (event) { //对接受的信息进行逻辑判断
            //    Meg=JSON.parse(event.data)
            Meg = event.data;
            console.log("收到硬件信息" + Meg);
            //根据收到的信息实时显示到页面
            if (event.data.substring(0, 3) == "yw1") {
                this.state1 = event.data.substring(3,)
                if (this.state1 > this.limit1) {
                    axios.get("http://localhost:8888/sendMessageTo/HWwarn3Z");
                    alert("烟雾超标！")
                }
            }
            if (event.data.substring(0, 3) == "yw2") {
                this.state2 = event.data.substring(3,)
                if (this.state2 > this.limit1) {
                    axios.get("http://localhost:8888/sendMessageTo/HWwarn3Z");
                    alert("烟雾超标！")
                }
            }
            if (event.data == "HWwarn2Z") {
                this.state3 = "非法进入"
            }
            if (event.data == "HWwarn0Z") {
                this.state3 = "正常"
            }
            if (event.data == "Reconnect") {
                this.reconnect();
            }


        },

    }

}
</script>
